<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="创建地址"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<view v-if="!success">
				<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">

					<view class="list-box">
						<view class="list-box__left">
							<text class="dawn-color-red tn-padding-right-ss">*</text>
							<text class="list__left__icon tn-icon-my-fill"></text>
							<view class="">联系人</view>
						</view>
						<view class="list-box__right">
							<tn-input v-model="formData.name" class="tn-input-text" :height="heightInput"
								placeholder="请填写收货人姓名" :clearable="true" type="text"></tn-input>
							<!-- <text class="list-box__right__icon tn-icon-scan"></text> -->
						</view>
					</view>
					<view class="list-box">
						<view class="list-box__left">
							<text class="dawn-color-red tn-padding-right-ss">*</text>
							<text class="list__left__icon tn-icon-phone-fill "></text>
							<view class="">手机号</view>
						</view>
						<view class="list-box__right">
							<tn-input v-model="formData.mobile" class="tn-input-text" :height="heightInput"
								placeholder="请填写收货人手机号" :clearable="true" type="text"></tn-input>
							<!-- <text class="list-box__right__icon tn-icon-scan"></text> -->
						</view>
					</view>
					<view class="list-box">
						<view class="list-box__left">
							<!-- <text class="dawn-color-red tn-padding-right-ss">*</text> -->
							<view class="list-box__left__text">区域</view>
						</view>
						<view class="list-box__right">
							<view @click="pickerShow = true" class="tn-input-select">
								<text v-if="formData.selectRegion">{{ formData.selectRegion }}</text>
								<text v-else class="tn-color-gray">请选择区域</text>
								<text class="tn-padding-right-ss tn-input-select__select tn-icon-up-triangle"
									:class="pickerShow?'tn-input-select__select--reverse':''"></text>
							</view>
						</view>
					</view>
					<view class="list-box" style="display: block;">
						<view class="list-box__left">
							<text class="dawn-color-red tn-padding-right-ss">*</text>
							<text class="list__left__icon tn-icon-map-fill"></text>
							<view class="">详细地址</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<textarea v-model="formData.detailAddress" placeholder="请填写地址"
								placeholder-style="color:#AAAAAA"></textarea>
						</view>
					</view>
					

					<view class="tn-flex-1 justify-content-item tn-margin-top-xl tn-margin-bottom tn-text-center">
						<tn-button width="90%" @click="submitForm()" backgroundColor="tn-main-gradient-dawn" size="lg"
							shadow>
							<text class="tn-icon-check tn-padding-right-ss"></text>
							<text class="tn-text-ellipsis">保存地址</text>
						</tn-button>
					</view>

				</view>

			</view>
			<view v-if="show">
				<dawnMsg :box="dawnBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- 地区picker -->
		<tn-picker v-model="pickerShow" mode="region" :defaultRegin="defaultRegin"
			@confirm="regionPickerConfirm"></tn-picker>
			
		<!-- <UniAddressSelector
		    v-if="pickerShow"
		    :areaInfoSelected="areaInfoObj"
		    @cancel="handleCancel"
		    @confirm="handleConfirm">
		</UniAddressSelector> -->

		<!-- <regionWindow ref="region"></regionWindow> -->


		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as AddressApi from '@/api/member/address.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import eHealth from "@/libs/eHealth.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'create',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				heightInput: 60,
				dawnBox: 'popup',
				loading: false,
				show: false,
				success: false,
				msg: '',
				formData: {
					name: '',
					mobile: '',
					areaId: 0,
					selectRegion: '',
					detailAddress: '',
					defaultStatus: false,
				},
				list: [],
				pickerShow: false,
				defaultRegin: ['云南省', '昆明市', '五华区'],
			}
		},
		onLoad(options) {
			if (!this.isLogin || !this.userInfo.id) {
				this.loading = true;
				toLogin();
			} else {
				let that = this;
			}
		},
		methods: {
			openRegion() {
				this.$refs.region.open()
			},
			// 点击地区选择器
			regionPickerConfirm(event) {
				this.formData.selectRegion = event.province.label + '-' + event.city.label + '-' + event.area.label
			},
			submitForm: function() {
				let that = this;

				// if (!this.formData.nation) {
				// 	return this.$util.Tips({
				// 		title: '请选择民族'
				// 	});
				// }

				// if (!this.formData.professionName) {
				// 	return this.$util.Tips({
				// 		title: '请选择职业'
				// 	});
				// }

				this.loading = true;
				this.show = false;
				this.formData.userId = this.userInfo.id;
				this.formData.openid = this.userInfo.openid;
				this.formData.detailAddress =  this.formData.selectRegion+this.formData.detailAddress;
				AddressApi.createAddress(this.formData).then(res => {
					that.loading = false;
					console.table(res);
					if (res.code === 0) {
						that.success = true;
						// that.dawnBox = 'btn';	
						that.msg = '地址创建成功';
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
				})
			},
			navLink(url) {
				uni.navigateTo({
					url: url
				})
			},
			navDel(item) {
				uni.navigateTo({
					url: '/hosp/outpatient/unpay_recipe?registerNo=' + item.NO
				})
			},
			onSelect(event, type) {
				console.table(event);
				if ("nation" === type) {
					// this.queryData.status = event[0]['value'];
					// this.queryData.statusText = event[0]['label'];	
					this.formData.nation = event[0]['label'];
				} else if ("profession" === type) {
					this.formData.professionName = event[0]['label'];
				}
			},
			strMask(str) {
				return this.$util.strMask(str, 6);
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 10rpx;
		border-bottom: 1rpx solid $dawn-line-color;

		&__left {
			display: flex;
			align-items: center;
			justify-content: end;
			width: 90px;
			padding-right: 10rpx;
			white-space: nowrap;
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: calc(100% - 90px);
			;

			&__text {
				font-size: $dawn-font-size-lg;
				font-weight: bolder;
			}

			&__icon {
				font-size: 40rpx;
				padding-left: 7rpx;
			}
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 20rpx 5rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}
</style>